<template>
  <div class="action-buttons flex gap-1" :class="{ 'flex-col': direction === 'vertical' }">
    <el-button
      v-for="(button, index) in buttons"
      :key="index"
      :type="button.type || 'default'"
      :size="size"
      :disabled="typeof button.disabled === 'function' ? button.disabled(row) : button.disabled"
      :loading="button.loading"
      v-bind="button.props || {}"
      @click="button.action && button.action(row)"
      :link="mode === 'link'"
      :class="button.class || ''"
    >
      <el-icon v-if="button.icon" class="mr-1"><component :is="button.icon" /></el-icon>
      {{ button.label }}
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'ActionButtons',
  props: {
    buttons: {
      type: Array,
      required: true,
      // 按钮配置示例
      // [{
      //   label: '编辑', // 按钮文字
      //   type: 'primary', // 按钮类型
      //   icon: 'Edit', // 图标组件名称
      //   action: (row) => {}, // 点击回调
      //   disabled: false, // 或 (row) => boolean 是否禁用
      //   loading: false, // 是否加载中
      //   class: '', // 额外的类名
      //   props: {} // 其他按钮属性
      // }]
    },
    row: {
      type: Object,
      default: () => ({})
    },
    size: {
      type: String,
      default: 'small'
    },
    mode: {
      type: String,
      default: 'default', // 'default' | 'link' | 'text'
      validator: (val) => ['default', 'link', 'text'].includes(val)
    },
    direction: {
      type: String,
      default: 'horizontal', // 'horizontal' | 'vertical'
      validator: (val) => ['horizontal', 'vertical'].includes(val)
    }
  }
}
</script>

<style scoped>
.action-buttons {
  display: flex;
  align-items: center;
}

.action-buttons.flex-col {
  flex-direction: column;
  align-items: flex-start;
}

.action-buttons .el-button {
  transition: all 0.3s;
}

.action-buttons .el-button:hover {
  transform: translateY(-2px);
}
</style> 